
import { useEffect ,useState} from 'react';
import { Col, Row,Tag} from 'antd';
import './index.less'
import {getTodayBornApi,getTodayExpiresApi,getTodayAddVipApi,getThirtyNotConsumApi } from '@/api/vip/vip'
export default function VipData(){
    const [bornData,setBornData] = useState<any>()
    const [expiresData,setExpiresData] = useState<any>()
    const [addVipData,setAddVipData] = useState<any>()
    const [notConsumData,setNotConsumData] = useState<any>()
    useEffect(()=>{
        getTodayBorn()
        getTodayExpires()
        getTodayAddVip()
        getThirtyNotConsum()
    },[])
    const getTodayBorn = ()=>{
        getTodayBornApi().then(getTodayBornRes=>{
            setBornData(getTodayBornRes.bornData)
        })
    }
    const getTodayExpires = ()=>{
        getTodayExpiresApi().then(getTodayExpiresRes=>{
            setExpiresData(getTodayExpiresRes.expiresData)
        })
    }
    const getTodayAddVip = ()=>{
        getTodayAddVipApi().then(getTodayAddVipRes=>{
            setAddVipData(getTodayAddVipRes.addVipData)
        })
    }
    const getThirtyNotConsum = ()=>{
        getThirtyNotConsumApi().then(getThirtyNotConsumRes=>{
            setNotConsumData(getThirtyNotConsumRes.notConsumData)
        })
    }
    return (
        <div>
                 <Row>
        <Col xs={24} sm={24} md={12} lg={12} xl={6}>
          <div className='vipdata'>
              <p className='vip_data_title'>今日过生</p>
              <p  className='vip_data_num'>{bornData==null? 0: bornData.todayBorn} <span>人</span></p>
              <p className='vip_data_qt'>本月还有（ <span>{bornData==null? 0: bornData.monthBorn}</span> ） <Tag color="#2db7f5">会员</Tag></p>
              <p className='vip_data_qt'>下月还有（ <span>{bornData==null? 0: bornData.nextMonthBorn}</span> ）<Tag color="#2db7f5">会员</Tag></p>
          </div>
          
        </Col>
        <Col xs={24} sm={24} md={12} lg={ 12} xl={6}>
          <div className='vipdata'>
            <p className='vip_data_title'>今日新增会员</p>
            <p className='vip_data_num'>{addVipData==null? 0: addVipData.todayAddVip}<span>人</span></p>
            <p className='vip_data_qt'>7天新增 （<span>{addVipData==null? 0: addVipData.sevenAddVip}</span> ） <Tag color="#2db7f5">会员</Tag></p>
            <p className='vip_data_qt'>30天新增 （<span>{addVipData==null? 0: addVipData.thirtyAddVip}</span>） <Tag color="#2db7f5">会员</Tag></p>
          </div>
        </Col>
        <Col xs={24} sm={24} md={12} lg={12} xl={6}>
          <div className='vipdata'>
          <p className='vip_data_title'>今日到期会员</p>
            <p  className='vip_data_num'>{expiresData==null? 0: expiresData.todayExpires}<span>人</span></p>
              <p className='vip_data_qt'>本月还有（ <span>{expiresData==null? 0: expiresData.monthExpires}</span> ）<Tag color="#2db7f5">会员到期 </Tag></p>
              <p className='vip_data_qt'>下月还有（ <span>{expiresData==null? 0: expiresData.nextMonthExpires}</span> ）<Tag color="#2db7f5">会员到期 </Tag></p></div>
        </Col>
        <Col xs={24} sm={24} md={12} lg={12} xl={6}>
          <div className='vipdata'>
          
          <p className='vip_data_title'>本月未消费过</p>
            <p  className='vip_data_num'>{notConsumData==null? 0: notConsumData.thirtyDayNotConsum} <span>人</span></p>
              <p className='vip_data_qt'>60天（ <span>{notConsumData==null? 0: notConsumData.sixtyDayNotConsum}</span> ） <Tag color="#2db7f5">会员未消费过</Tag></p>
              <p className='vip_data_qt'>90天（ <span>{notConsumData==null? 0: notConsumData.ninetyDayNotConsum}</span> ） <Tag color="#2db7f5">会员未消费过</Tag></p>
          </div>
        </Col>
      </Row>
        </div>
    )
}